<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title></title>
    <script  src="js/jquery-3.1.1.js">
        
    </script>
    <style>
        div{
            border:2px solid green;
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 26px;
        }
        img{
            max-width: 100%;
            max-height:100%;
        }
    </style>
</head>
<body>
   <div>
       <span>拖动到这里</span>
       <img>
   </div>
   <button type="submit">上传</button>
</body>
</html>
<script>
   $('div').on('dragover',function(ev){
       ev.preventDefault();
   })
    $('div').on('drop',function(ev){
        ev.preventDefault();
       var file = ev.originalEvent.dataTransfer.files[0];
    //    console.dir(ev.originalEvent)
    //    console.dir(file); 
    if(file.type=='image/png' || file.type=='image/jpeg'){
       $('img')[0].src = URL.createObjectURL(file);
       $('span').hide();
       }else{
           alert('只能上传图片')
       }
    })
</script>